import { Component, OnInit, Input, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { Capacity } from '../../../../entity/capacity.model';
import { ApplicationService } from '../../../../service/application.service';

@Component({
  selector: 'app-capacity-chart',
  templateUrl: './capacity-chart.component.html',
  styleUrls: ['./capacity-chart.component.css']
})
export class CapacityChartComponent implements OnInit {
  /**
   * echarts实例对象
   * 
   * @private
   * @type {*}@memberof CompareEchartsComponent
   */
  private echartsIntance: any = null;
  /**
    * echarts数据
    * 
    * @type {object}@memberof PlanPowerPanelComponent
    */
  public options: object;
  private xAxis: Object;

  /**
   * 倍率
   *
   * @public
   * @type {number}@memberof MainComponent
   */
  public ratio: number = 1;
  /**
   * 数据集合
   * 
   * @memberof PlanPowerPanelComponent
   */
  @Input() capacityData: Capacity[];

  /**
   * 数据集合
   * 
   * @memberof PlanPowerPanelComponent
   */
  @Input() xAxisData: string[];

  /**
   * 判断条件
   * 
   * @memberof PlanPowerPanelComponent
   */
  @Input() sign: string;


  @Output() onMonthClick = new EventEmitter<string>();

  constructor(
    private application: ApplicationService,

  ) { }

  ngOnInit() {
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['ratio']) {
      this.ratio = Number(this.application.currentApplicationParams['ratio'].paramValue);
    }
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes['capacityData'] && changes['capacityData'].currentValue) {
      this.changeData();
    }
    if (changes['xAxisData'] && changes['xAxisData'].currentValue) {
      this.changeData();
    }
  }

  initXAxis() {
    let XM: Style[] = [];
    this.xAxisData.forEach((o, index) => {
      XM.push({
        value: o,
        textStyle: {
          backgroundColor: this.sign === o ? 'red' : 'transparent',
          padding: [2, 3, 2, 3],
          borderRadius: 5,
          color: '#fff',
          fontSize: 14
        }
      })
    });

    this.xAxis = [
      {
        type: 'category',
        axisLabel: {
          interval: 0,
          show: true,
        },
        axisPointer: {
          type: 'shadow'
        },
        axisLine: {
          lineStyle: {
            color: '#8DBDC7',
            width: 1,
            type: 'solid'
          }
        },
        triggerEvent: true,
        data: XM
      },
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          onZero: false,
          lineStyle: {
            color: '#B17C2E',
            opacity: 0
          }
        },
        data: this.capacityData.map(o => o.completiones.toFixed(2) + '%')
      }
    ]
  }
  private initOption() {
    if (this.xAxisData && this.xAxisData.length && this.capacityData && this.capacityData.length) {
      this.initXAxis();
      this.options = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 12,
          },
          axisPointer: {
            type: 'cross'
          }
        },
        calculable: true,
        grid: {
          left: '5%',
          right: '4%',
          top: '10%',
          bottom: '100px',
          // containLabel: true
        },
        legend: {
          data: ['实际', '计划', '损失'],
          // x: 'right',
          left: '1%',
          bottom: 2,
          align: 'left',
          orient: 'vertical',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 10,
            color: '#7BD1AE'
          },
          padding: 10
        },
        xAxis: this.xAxis,
        yAxis: [
          {
            type: 'value',
            name: '发电量(万kWh)',
            splitNumber: 5,
            nameTextStyle: {
              color: '#37766D',
            },
            axisLabel: {
              formatter: function (param) {
                let power: number;
                if (param) {
                  return `${param / 1000}`;
                } else {
                  return 0;
                }
              },
              interval: 1,
              show: true,
              textStyle: {
                color: '#37766D',
                fontSize: 12,
              }

            },
            splitLine: {
              lineStyle: {
                opacity: 0.2
              }
            },
            axisLine: {
              lineStyle: {
                color: '#8DBDC7',
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            type: 'value',
            name: '完成率(%)',
            show: false,
            splitLine: {
              show: false
            },
            min: 0,
            max: 100,
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: '#37766D',
                fontSize: 10,
              }
            },
            nameTextStyle: {
              color: '#37766D',
            },
            axisLine: {
              lineStyle: {
                color: '#8DBDC7',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: 25,
            barGap: '12%',
            itemStyle: {
              normal: {
                color: '#B17C2E',
                fontSize: 12,
              }
            },
            label: {
              normal: {
                show: true,
                position: 'bottom',
                align: 'center',
                verticalAlign: 'middle',
                distance: 25,
                // padding: [20,0,0,23],
                offset: [27.5, 10],
                rich: {
                  name: {
                    textBorderColor: '#fff'
                  }
                },
              }
            },
            data: this.capacityData.map(o => (o.adjustPower * this.ratio).toFixed(2)),
          },
          {
            name: '计划',
            type: 'bar',
            barWidth: 25,
            barGap: '12%',
            label: {
              normal: {
                show: true,
                position: 'bottom',
                align: 'center',
                verticalAlign: 'middle',
                distance: 35,
                // padding: [30,0,0,-30],
                offset: [0, 20],
                rich: {
                  name: {
                    textBorderColor: '#fff'
                  }
                },
              }
            },
            itemStyle: {
              normal: {
                color: '#DFFFA6',
                fontSize: 12,
              },

            },
            splitLine: {
              show: false
            },
            data: this.capacityData.map(o => (o.plantPower * this.ratio).toFixed(2)),
          },
          {
            name: '损失',
            type: 'bar',
            barWidth: 25,
            barGap: '12%',
            label: {
              normal: {
                show: true,
                position: 'bottom',
                align: 'center',
                verticalAlign: 'middle',
                distance: 45,
                // padding: [30,0,0,-30],
                offset: [-27.5, 30],
                rich: {
                  name: {
                    textBorderColor: '#fff'
                  }
                },
              }
            },
            itemStyle: {
              normal: {
                color: '#7FCDB3',
                fontSize: 12,
              },

            },
            splitLine: {
              show: false
            },
            data: this.capacityData.map(o => (o.lossPower * this.ratio).toFixed(2)),
          },
          {
            name: '完成率(%)',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#FFFA11',
                fontSize: 12,
                lineStyle: {
                  opacity: 0
                }
              },
            },
            data: this.capacityData.map(o => o.completiones.toFixed(2)),
          }
        ]
      };
    }
  }
  /**
	 * 初始化echarts实例
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    ec.on('click', (params) => {
      if (params.componentType === 'series') {
        return;
      } else {
        if (this.sign !== params.value) {
          this.sign = params.value;
          this.onMonthClick.emit(this.sign);
          this.initXAxis();
          this.echartsIntance.setOption({ xAxis: this.xAxis });
        }
      }
    })
  }
  /**
   * 数据改变时触发
   * 
   * @param {} 
   * 
   * @memberof PlanPowerPanelComponent
   */
  public changeData() {
    if (!this.capacityData) return false;
    if (this.echartsIntance) {
      this.echartsIntance.setOption(this.options);
    } else {
      this.initOption();
    }

  }
  /**
	 * 更新echarts实例数据
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    };
  }
}

interface Style {
  value: string;
  textStyle: TextStyle;
}

interface TextStyle {
  backgroundColor?: string;
  padding?: number[];
  color?: string;
  fontSize?: number;
  borderRadius?: number;
}



// WEBPACK FOOTER //
// ./src/app/module/monitor/capacity-view/capacity-chart/capacity-chart.component.ts